import React, {Component} from 'react'
import mapboxgl from 'mapbox-gl'
import MapboxLanguage  from '@mapbox/mapbox-gl-language'
import mapStyles from '../../components/common/map/map_style'
mapboxgl.setRTLTextPlugin(
    "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
);
const language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });
export default class Layout extends Component {
    componentDidMount() {
        mapboxgl.accessToken = 'pk.eyJ1IjoiemhhbmdqaW5neXVhbiIsImEiOiJja2R5cHhoNXYycGVtMnlteXkwZGViZDc2In0.UhckH-74AgPwMsDhPjparQ';
        const map = new mapboxgl.Map({
            container: this.mapContainer,
            style: mapStyles,
            center: [103.75237619, 37.228614],
            zoom: 3,
            minZoom: 2,
            scrollZoom: true,
            epsg: 'EPSG:4490',
            localFontFamily: "'Microsoft YaHei', '黑体',Arial, sans-serif",
        });
        map.addControl(language);
    }
    render() {
        return (
            <div>
                {/* 引入样式文件 */}
                {/*<link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />*/}
                <div ref={el => this.mapContainer = el} style={{height: '100%', width:'100%', position: 'absolute'}} />
            </div>
        )
    }
}
